<template>
  <el-dialog :title="'选择人员分组'" :close-on-click-modal="false" :visible.sync="visible" width="800px" top="8vh"
             @close="clearDataList()" append-to-body>
    <div style="height: 75vh">
      <div class="avue-crud" style="height: 70vh">
    <div>
      <el-table :data="fzData" @selection-change="handlefzDataChange"  class="avue-crud"  height="250">
        <el-table-column :selectable="checkSelect" type="selection" width="55px"></el-table-column>
        <el-table-column prop="" label="序号"  :formatter="nShowIndex" ></el-table-column>
        <el-table-column prop="ryfzMc"  label="名称" width="200px"></el-table-column>
        <el-table-column prop="ryfzSm"  label="说明" width="285px"></el-table-column>
      </el-table>
    </div>
    <div style="margin: 20px 0">奖金项</div>
    <div>
      <el-table :data="JjxData" @selection-change="handleJjxDataChange" class="avue-crud">
        <el-table-column type="selection" width="55px"></el-table-column>
        <el-table-column prop="" label="序号" :formatter="nShowIndex"></el-table-column>
        <el-table-column prop="jjxMc" label="名称"></el-table-column>
        <el-table-column prop="jjxSm" label="说明"></el-table-column>
      </el-table>
    </div>
    </div>
    <span slot="footer" class="dialog-footer" style="float: right;">
      <el-button type="primary" @click="btnSave">确定</el-button>
      <el-button @click="clearDataList" type="primary" plain>取消</el-button>
    </span>
    </div>
  </el-dialog>
</template>

<script>
import {getRyfzbList} from '@/api/jiangjin/jiangjinryfzb'
import {getJjDeptJjx} from '@/api/jiangjin/jiangjinjjxxxb'

export default {
  data(){
    return{
      visible:false,
      deptId:'',
      fzData:[],
      JjxData:[],
      multiplefzData: [],
      multipleJjxData: [],
      SelectRyStr:""
    }
  },
  methods:{
    init(deptId,selectRy){
      this.visible = true;
      this.deptId = deptId;
      this.SelectRyStr = "";
      this.SelectRyStr = selectRy;
      this.getInitData();
    },
    getInitData(){
      getRyfzbList(this.deptId).then(res => {
        this.fzData = res.data.data;
      });
      getJjDeptJjx(this.deptId).then(res =>{
        this.JjxData = res.data.data;
      })
    },
    nShowIndex(row, column, cellValue, index){
      return index + 1;
    },
    handlefzDataChange(val){
      this.multiplefzData = val;
    },
    checkSelect (row,index) {
      let isCheck = false;
      if(this.SelectRyStr.indexOf(row.id) === -1){
        isCheck = true;
      }
      return isCheck;
    },
    handleJjxDataChange(val){
      this.multipleJjxData = val;
    },
    clearDataList(){
      this.fzData = [];
      this.JjxData = [];
      this.multiplefzData = [];
      this.multipleJjxData = [];
      this.visible = false;
    },
    btnSave(){
      if(this.multiplefzData.length === 0){
        this.$notify.closeAll();
        this.$notify.error('请选择人员分组');
        return;
      }

      if(this.multipleJjxData.length === 0){
        this.$notify.closeAll();
        this.$notify.error('请选择奖金项');
        return;
      }

      this.$emit("getChildValue",this.multiplefzData,this.multipleJjxData);
      this.clearDataList();
    }
  }
}
</script>

<style scoped>

</style>
